<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../js/auth.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/config.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/vue.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/jquery-3.3.1.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/xlsx.full.min.js"></script>
    <script src="https://6c6f-lowcode-4gj2yio295db4d6b-1313839769.tcb.qcloud.la/weda-resource/js/FileSaver.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-container class="main">
            <el-header class="header">
                <p>学生成绩管理系统</p>
                <el-dropdown @command="signOut">
                    <i class="el-icon-user-solid"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="signOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu default-active="1">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>学生</span>
                            </template>
                            <el-menu-item index="1-1" @click="selecteChange('1-1')">录入</el-menu-item>
                            <el-menu-item index="1-2" @click="selecteChange('1-2')">查询</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>教师</span>
                            </template>
                            <el-menu-item index="2-1" @click="selecteChange('2-1')">录入</el-menu-item>
                            <el-menu-item index="2-2" @click="selecteChange('2-2')">查询</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>学院</span>
                            </template>
                            <el-menu-item index="3-1" @click="selecteChange('3-1')">录入</el-menu-item>
                            <el-menu-item index="3-2" @click="selecteChange('3-2')">查询</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>专业</span>
                            </template>
                            <el-menu-item index="4-1" @click="selecteChange('4-1')">录入</el-menu-item>
                            <el-menu-item index="4-2" @click="selecteChange('4-2')">查询</el-menu-item>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>班级</span>
                            </template>
                            <el-menu-item index="5-1" @click="selecteChange('5-1')">录入</el-menu-item>
                            <el-menu-item index="5-2" @click="selecteChange('5-2')">查询</el-menu-item>
                        </el-submenu>
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>课程</span>
                            </template>
                            <el-menu-item index="6-1" @click="selecteChange('6-1')">录入</el-menu-item>
                            <el-menu-item index="6-2" @click="selecteChange('6-2')">查询</el-menu-item>
                        </el-submenu>
                        <el-submenu index="7">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>成绩</span>
                            </template>
                            <el-menu-item index="7-1" @click="selecteChange('7-1')">录入</el-menu-item>
                            <el-menu-item index="7-2" @click="selecteChange('7-2')">查询</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container
                        v-show="bar === '1-2' || bar === '2-2' || bar === '3-2' || bar === '4-2' || bar === '5-2' || bar === '6-2' || bar === '7-2'">
                    <el-header class="table-header">
                        <el-dropdown @command="orderByChange" style="margin-right: 15px;">
                            <span class="el-dropdown-link">排序字段<i
                                    class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="val in tableConfig" :key="val.value" :command="val.value">
                                    {{ val.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-dropdown @command="orderTypeChange" style="margin-right: 15px;">
                            <span class="el-dropdown-link">排序方式<i
                                    class="el-icon-arrow-down el-icon--right"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="asc">升序</el-dropdown-item>
                                <el-dropdown-item command="desc">降序</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-header>
                    <el-main>
                        <el-table :data="tableData">
                            <el-table-column v-for="val in tableConfig" :key="val.value" :prop="val.value"
                                             :label="val.label"
                                             width="150px"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="300px">
                                <template slot="header" slot-scope="scope">
                                    <div style="display: flex;">
                                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索"
                                                  style="margin-right: 8px;"></el-input>
                                        <el-button size="mini" @click="exports">导出</el-button>
                                    </div>
                                </template>
                                <template slot-scope="scope">
                                    <el-button size="mini"
                                               @click="edit(scope.$index, scope.row)">编辑
                                    </el-button>
                                    <el-button type="danger" size="mini"
                                               @click="deleted(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>


                <el-container v-if="bar === '1-1'">
                    <el-main>
                        <el-form ref="student-add" label-width="100px" label-position="left" size="mini"
                                 :model="student.add.form"
                                 :rules="student.add.rules">
                            <el-form-item label="学号" prop="studentId">
                                <el-input type="text" maxLength="12" placeholder="请输入"
                                          v-model="student.add.form.studentId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="student.add.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="student.add.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-select v-model="student.add.form.major" placeholder="请选择">
                                    <el-option v-for="item in selectData.major" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="班级" prop="clazz">
                                <el-select v-model="student.add.form.clazz" placeholder="请选择">
                                    <el-option v-for="item in selectData.clazz" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学分" prop="credit">
                                <el-input type="number" maxLength="64" placeholder="请输入"
                                          v-model.number="student.add.form.credit"></el-input>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('student-add', 'student')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '1-2'">
                    <el-dialog title="修改学生" :visible.sync="student.edit.dialogFormVisible">
                        <el-form ref="student-edit" label-width="100px" label-position="left" size="mini"
                                 :model="student.edit.form"
                                 :rules="student.edit.rules">
                            <el-form-item label="学号" prop="studentId">
                                <el-input type="text" maxLength="12" placeholder="请输入"
                                          v-model="student.edit.form.studentId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="student.edit.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="student.edit.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-select v-model="student.edit.form.major" placeholder="请选择">
                                    <el-option v-for="item in selectData.major" :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="班级" prop="clazz">
                                <el-select v-model="student.edit.form.clazz" placeholder="请选择">
                                    <el-option v-for="item in selectData.clazz" :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学分" prop="credit">
                                <el-input type="number" maxLength="64" placeholder="请输入"
                                          v-model.number="student.edit.form.credit"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="student.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('student-edit', 'student')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


                <el-container v-if="bar === '2-1'">
                    <el-main>
                        <el-form ref="teacher-add" label-width="100px" label-position="left" size="mini"
                                 :model="teacher.add.form"
                                 :rules="teacher.add.rules">
                            <el-form-item label="教师编号" prop="teacherId">
                                <el-input type="text" maxLength="12" placeholder="请输入"
                                          v-model="teacher.add.form.teacherId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="teacher.add.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="teacher.add.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-select v-model="teacher.add.form.major" placeholder="请选择">
                                    <el-option v-for="item in selectData.major" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="班级" prop="clazz">
                                <el-select v-model="teacher.add.form.clazz" placeholder="请选择">
                                    <el-option v-for="item in selectData.clazz" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('teacher-add', 'teacher')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '2-2'">
                    <el-dialog title="修改教师" :visible.sync="teacher.edit.dialogFormVisible">
                        <el-form ref="teacher-edit" label-width="100px" label-position="left" size="mini"
                                 :model="teacher.edit.form"
                                 :rules="teacher.edit.rules">
                            <el-form-item label="教师编号" prop="teacherId">
                                <el-input type="text" maxLength="12" placeholder="请输入"
                                          v-model="teacher.edit.form.teacherId"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="teacher.edit.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="teacher.edit.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-select v-model="teacher.edit.form.major" placeholder="请选择">
                                    <el-option v-for="item in selectData.major" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="班级" prop="clazz">
                                <el-select v-model="teacher.edit.form.clazz" placeholder="请选择">
                                    <el-option v-for="item in selectData.clazz" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="teacher.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('teacher-edit', 'teacher')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


                <el-container v-if="bar === '3-1'">
                    <el-main>
                        <el-form ref="college-add" label-width="100px" label-position="left" size="mini"
                                 :model="college.add.form"
                                 :rules="college.add.rules">
                            <el-form-item label="学院编号" prop="collegeId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="college.add.form.collegeId"></el-input>
                            </el-form-item>
                            <el-form-item label="学院名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="college.add.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主要负责人" prop="mainInCharge">
                                <el-select v-model="college.add.form.mainInCharge" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('college-add', 'college')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '3-2'">
                    <el-dialog title="修改学院" :visible.sync="college.edit.dialogFormVisible">
                        <el-form ref="college-edit" label-width="100px" label-position="left" size="mini"
                                 :model="college.edit.form"
                                 :rules="college.edit.rules">
                            <el-form-item label="学院编号" prop="collegeId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="college.edit.form.collegeId"></el-input>
                            </el-form-item>
                            <el-form-item label="学院名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="college.edit.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主要负责人" prop="mainInCharge">
                                <el-select v-model="college.edit.form.mainInCharge" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="college.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('college-edit', 'college')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


                <el-container v-if="bar === '4-1'">
                    <el-main>
                        <el-form ref="major-add" label-width="100px" label-position="left" size="mini"
                                 :model="major.add.form"
                                 :rules="major.add.rules">
                            <el-form-item label="专业编号" prop="majorId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="major.add.form.majorId"></el-input>
                            </el-form-item>
                            <el-form-item label="专业名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="major.add.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主要负责人" prop="mainInCharge">
                                <el-select v-model="major.add.form.mainInCharge" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="major.add.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('major-add', 'major')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '4-2'">
                    <el-dialog title="修改专业" :visible.sync="major.edit.dialogFormVisible">
                        <el-form ref="major-edit" label-width="100px" label-position="left" size="mini"
                                 :model="major.edit.form"
                                 :rules="major.edit.rules">
                            <el-form-item label="专业编号" prop="majorId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="major.edit.form.majorId"></el-input>
                            </el-form-item>
                            <el-form-item label="专业名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="major.edit.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主要负责人" prop="mainInCharge">
                                <el-select v-model="major.edit.form.mainInCharge" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="major.edit.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="major.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('major-edit', 'major')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


                <el-container v-if="bar === '5-1'">
                    <el-main>
                        <el-form ref="clazz-add" label-width="100px" label-position="left" size="mini"
                                 :model="clazz.add.form"
                                 :rules="clazz.add.rules">
                            <el-form-item label="班级编号" prop="clazzId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="clazz.add.form.clazzId"></el-input>
                            </el-form-item>
                            <el-form-item label="班级名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="clazz.add.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主要负责人" prop="mainInCharge">
                                <el-select v-model="clazz.add.form.mainInCharge" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="clazz.add.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-select v-model="clazz.add.form.major" placeholder="请选择">
                                    <el-option v-for="item in selectData.major" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('clazz-add', 'clazz')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '5-2'">
                    <el-dialog title="修改班级" :visible.sync="clazz.edit.dialogFormVisible">
                        <el-form ref="clazz-edit" label-width="100px" label-position="left" size="mini"
                                 :model="clazz.edit.form"
                                 :rules="clazz.edit.rules">
                            <el-form-item label="班级编号" prop="clazzId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="clazz.edit.form.clazzId"></el-input>
                            </el-form-item>
                            <el-form-item label="班级名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="clazz.edit.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主要负责人" prop="mainInCharge">
                                <el-select v-model="clazz.edit.form.mainInCharge" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学院" prop="college">
                                <el-select v-model="clazz.edit.form.college" placeholder="请选择">
                                    <el-option v-for="item in selectData.college" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                                <el-select v-model="clazz.edit.form.major" placeholder="请选择">
                                    <el-option v-for="item in selectData.major" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="clazz.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('clazz-edit', 'clazz')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


                <el-container v-if="bar === '6-1'">
                    <el-main>
                        <el-form ref="course-add" label-width="100px" label-position="left" size="mini"
                                 :model="course.add.form"
                                 :rules="course.add.rules">
                            <el-form-item label="课程编号" prop="courseId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="course.add.form.courseId"></el-input>
                            </el-form-item>
                            <el-form-item label="课程名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="course.add.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="教师" prop="teacher">
                                <el-select v-model="course.add.form.teacher" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学分" prop="credit">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model.number="course.add.form.credit"></el-input>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('course-add', 'course')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '6-2'">
                    <el-dialog title="修改课程" :visible.sync="course.edit.dialogFormVisible">
                        <el-form ref="course-edit" label-width="100px" label-position="left" size="mini"
                                 :model="course.edit.form"
                                 :rules="course.edit.rules">
                            <el-form-item label="课程编号" prop="courseId">
                                <el-input type="text" maxLength="4" placeholder="请输入"
                                          v-model="course.edit.form.courseId"></el-input>
                            </el-form-item>
                            <el-form-item label="课程名称" prop="name">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model="course.edit.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="教师" prop="teacher">
                                <el-select v-model="course.edit.form.teacher" placeholder="请选择">
                                    <el-option v-for="item in selectData.teacher" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学分" prop="credit">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model.number="course.edit.form.credit"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="course.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('course-edit', 'course')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


                <el-container v-if="bar === '7-1'">
                    <el-main>
                        <el-form ref="score-add" label-width="100px" label-position="left" size="mini"
                                 :model="score.add.form"
                                 :rules="score.add.rules">
                            <el-form-item label="学生" prop="student">
                                <el-select v-model="score.add.form.student" placeholder="请选择">
                                    <el-option v-for="item in selectData.student" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="课程" prop="course">
                                <el-select v-model="score.add.form.course" placeholder="请选择">
                                    <el-option v-for="item in selectData.course" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="成绩" prop="score">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model.number="score.add.form.score"></el-input>
                            </el-form-item>
                            <div class="button">
                                <el-button type="primary" @click="addData('score-add', 'score')">提交</el-button>
                            </div>
                        </el-form>
                    </el-main>
                </el-container>
                <el-container v-if="bar === '7-2'">
                    <el-dialog title="修改成绩" :visible.sync="score.edit.dialogFormVisible">
                        <el-form ref="score-edit" label-width="100px" label-position="left" size="mini"
                                 :model="score.edit.form"
                                 :rules="score.edit.rules">
                            <el-form-item label="学生" prop="student">
                                <el-select v-model="score.edit.form.student" placeholder="请选择">
                                    <el-option v-for="item in selectData.student" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="课程" prop="course">
                                <el-select v-model="score.edit.form.course" placeholder="请选择">
                                    <el-option v-for="item in selectData.course" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="成绩" prop="score">
                                <el-input type="text" maxLength="64" placeholder="请输入"
                                          v-model.number="score.edit.form.score"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="score.edit.dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="editData('score-edit', 'score')">确定</el-button>
                        </div>
                    </el-dialog>
                </el-container>


            </el-container>
        </el-container>
    </template>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                bar: '',
                search: '',
                orderBy: 'id',
                orderType: 'asc',
                records: [],
                tableData: [],
                tableConfig: [],
                selectData: {
                    student: [],
                    teacher: [],
                    college: [],
                    major: [],
                    clazz: [],
                    course: []
                },
                student: JSON.parse(JSON.stringify(formConfig.student)),
                teacher: JSON.parse(JSON.stringify(formConfig.teacher)),
                college: JSON.parse(JSON.stringify(formConfig.college)),
                major: JSON.parse(JSON.stringify(formConfig.major)),
                clazz: JSON.parse(JSON.stringify(formConfig.clazz)),
                course: JSON.parse(JSON.stringify(formConfig.course)),
                score: JSON.parse(JSON.stringify(formConfig.score))
            };
        },
        methods: {
            async selecteChange(value) {
                this.bar = value;
                this.orderBy = 'id';
                this.orderType = 'asc';
                const tables = {
                    '1-2': {
                        value: 'student',
                        config: config.student
                    },
                    '2-2': {
                        value: 'teacher',
                        config: config.teacher
                    },
                    '3-2': {
                        value: 'college',
                        config: config.college
                    },
                    '4-2': {
                        value: 'major',
                        config: config.major
                    },
                    '5-2': {
                        value: 'clazz',
                        config: config.clazz
                    },
                    '6-2': {
                        value: 'course',
                        config: config.course
                    },
                    '7-2': {
                        value: 'score',
                        config: [{
                            label: '数据标识', value: 'id', type: 'char', foreignKey: false
                        }, {
                            label: '姓名', value: 'name', type: 'varchar', foreignKey: false
                        }, {
                            label: '学院', value: 'college', type: 'char', foreignKey: false
                        }, {
                            label: '专业', value: 'major', type: 'char', foreignKey: false
                        }, {
                            label: '班级', value: 'clazz', type: 'char', foreignKey: false
                        }, {
                            label: '课程', value: 'course', type: 'char', foreignKey: true
                        }, {
                            label: '成绩', value: 'score', type: 'varchar', foreignKey: false
                        }]
                    }
                };
                if (tables[value]) {
                    const result = await this.getData(tables[value].value);
                    const records = [];
                    for (let record of result.records) {
                        let data = {};
                        for (let val of tables[value].config) {
                            if (value === '7-2') {
                                data['student'] = record?.student;
                            }
                            data[val.value] = val.foreignKey ? record?.['#' + val.value]?.name : record?.[val.value];
                        }
                        records.push(data);
                    }
                    if (value === '7-2') {
                        const student = await this.getData('student');
                        for (let record of records) {
                            const find = student.records.find(val => {
                                return val.id === record.student;
                            });
                            record.name = find?.name;
                            record.college = find?.['#college']?.name;
                            record.major = find?.['#major']?.name;
                            record.clazz = find?.['#clazz']?.name;
                            delete record.student;
                        }
                    }
                    records.sort((e1, e2) => {
                        if (e1.id === e2.id) {
                            return 0;
                        }
                        return e1.id < e2.id ? -1 : 1;
                    });
                    this.records = records;
                    this.tableData = records;
                    this.tableConfig = tables[value].config;
                }
            },
            orderByChange(value) {
                this.orderBy = value;
                this.records.sort((e1, e2) => {
                    if (e1[this.orderBy] === e2[this.orderBy]) {
                        return 0;
                    }
                    return e1[this.orderBy] < e2[this.orderBy] ? (this.orderType === 'asc' ? -1 : 1) : (this.orderType === 'asc' ? 1 : -1);
                });
                this.tableData = this.records;
            },
            orderTypeChange(value) {
                this.orderType = value;
                this.records.sort((e1, e2) => {
                    if (e1[this.orderBy] === e2[this.orderBy]) {
                        return 0;
                    }
                    return e1[this.orderBy] < e2[this.orderBy] ? (this.orderType === 'asc' ? -1 : 1) : (this.orderType === 'asc' ? 1 : -1);
                });
                this.tableData = this.records;
            },
            addData(formName, tableName) {
                this.$refs[formName].validate(valid => {
                    try {
                        if (!valid) {
                            this.$message.error('检验失败');
                            return false;
                        }
                        this.$confirm('确认提交？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'info'
                        }).then(async () => {
                            const data = meaninglessValueToNullValue(JSON.parse(JSON.stringify(this[formName.slice(0, formName.indexOf('-'))].add.form)));
                            const result = await myFetch('http://localhost:1628/production/controller/app/database/Create', {
                                tableName,
                                record: data
                            });
                            const body = await result.json();
                            if (body.data) {
                                this.$message.success('提交成功');
                                this.$refs[formName].resetFields();
                                return;
                            }
                            this.$message.error('提交失败：' + body.errorMessage);
                        });
                    } catch (err) {
                        console.error(err);
                        this.$message.error('请求失败');
                    }
                });
            },
            editData(formName, tableName) {
                this.$refs[formName].validate(valid => {
                    try {
                        if (!valid) {
                            this.$message.error('检验失败');
                            return false;
                        }
                        this.$confirm('确认修改？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'info'
                        }).then(async () => {
                            const data = meaninglessValueToNullValue(JSON.parse(JSON.stringify(this[formName.slice(0, formName.indexOf('-'))].edit.form)));
                            const result = await myFetch('http://localhost:1628/production/controller/app/database/Update', {
                                tableName,
                                id: this[formName.slice(0, formName.indexOf('-'))].edit.id,
                                record: data
                            });
                            const body = await result.json();
                            if (body.data) {
                                this.$message.success('更新成功');
                                for (let key in this[formName.slice(0, formName.indexOf('-'))].edit.form) {
                                    this[formName.slice(0, formName.indexOf('-'))].edit.form[key] = null;
                                }
                                this[formName.slice(0, formName.indexOf('-'))].edit.id = null;
                                this[formName.slice(0, formName.indexOf('-'))].edit.dialogFormVisible = false;
                                return;
                            }
                            this.$message.error('更新失败：' + body.errorMessage);
                        });
                    } catch (err) {
                        console.error(err);
                        this.$message.error('请求失败');
                    }
                });
            },
            edit(index, value) {
                const tables = {
                    '1-2': {
                        value: 'student',
                        select: {
                            college: this.selectData.college,
                            major: this.selectData.major,
                            clazz: this.selectData.clazz
                        }
                    },
                    '2-2': {
                        value: 'teacher',
                        select: {
                            college: this.selectData.college,
                            major: this.selectData.major,
                            clazz: this.selectData.clazz
                        }
                    },
                    '3-2': {
                        value: 'college',
                        select: {
                            mainInCharge: this.selectData.teacher
                        }
                    },
                    '4-2': {
                        value: 'major',
                        select: {
                            mainInCharge: this.selectData.teacher,
                            college: this.selectData.college
                        }
                    },
                    '5-2': {
                        value: 'clazz',
                        select: {
                            mainInCharge: this.selectData.teacher,
                            college: this.selectData.college,
                            major: this.selectData.major
                        }
                    },
                    '6-2': {
                        value: 'course',
                        select: {
                            teacher: this.selectData.teacher
                        }
                    },
                    '7-2': {
                        value: 'score',
                        select: {
                            student: this.selectData.student,
                            course: this.selectData.course
                        }
                    }
                };
                for (let key in this[tables[this.bar].value].edit.form) {
                    this[tables[this.bar].value].edit.form[key] = tables[this.bar].select[key] ? tables[this.bar].select[key].find(val => {
                        return val.label === value[key];
                    })?.value : value[key];
                }
                this[tables[this.bar].value].edit.id = value.id;
                this[tables[this.bar].value].edit.dialogFormVisible = true;
            },
            deleted(index, value) {
                try {
                    this.$confirm('确认删除？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }).then(async () => {
                        const tables = {
                            '1-2': 'student',
                            '2-2': 'teacher',
                            '3-2': 'college',
                            '4-2': 'major',
                            '5-2': 'clazz',
                            '6-2': 'course',
                            '7-2': 'score'
                        };
                        const result = await myFetch('http://localhost:1628/production/controller/app/database/Delete', {
                            'tableName': tables[this.bar],
                            'id': value.id
                        });
                        const body = await result.json();
                        if (body.data) {
                            this.records = this.records.filter(val => {
                                return val.id !== value.id
                            });
                            this.tableData = this.records;
                            this.$message.success('删除成功');
                            return;
                        }
                        this.$message.error('删除失败：' + body.errorMessage);
                    });
                } catch (err) {
                    console.error(err);
                    this.$message.error('请求失败');
                }
            },
            exports() {
                try {
                    const tables = {
                        '1-2': {
                            value: '学生',
                            config: config.student
                        },
                        '2-2': {
                            value: '老师',
                            config: config.teacher
                        },
                        '3-2': {
                            value: '学院',
                            config: config.college
                        },
                        '4-2': {
                            value: '专业',
                            config: config.major
                        },
                        '5-2': {
                            value: '班级',
                            config: config.clazz
                        },
                        '6-2': {
                            value: '课程',
                            config: config.course
                        },
                        '7-2': {
                            value: '成绩',
                            config: [{
                                label: '数据标识', value: 'id', type: 'char', foreignKey: false
                            }, {
                                label: '姓名', value: 'name', type: 'varchar', foreignKey: false
                            }, {
                                label: '学院', value: 'college', type: 'char', foreignKey: false
                            }, {
                                label: '专业', value: 'major', type: 'char', foreignKey: false
                            }, {
                                label: '班级', value: 'clazz', type: 'char', foreignKey: false
                            }, {
                                label: '课程', value: 'course', type: 'char', foreignKey: true
                            }, {
                                label: '成绩', value: 'score', type: 'varchar', foreignKey: false
                            }]
                        }
                    };
                    const title = tables[this.bar].config.map(value => {
                        return value.label;
                    });
                    const sheetInfo = [title];
                    this.tableData.forEach(value => {
                        const row = [];
                        for (let val of tables[this.bar].config) {
                            row.push(value[val.value]);
                        }
                        sheetInfo.push(row);
                    });
                    const book = XLSX.utils.book_new();
                    const sheet = XLSX.utils.aoa_to_sheet(sheetInfo);
                    XLSX.utils.book_append_sheet(book, sheet, tables[this.bar].value);
                    XLSX.writeFile(book, tables[this.bar].value + '.xlsx');
                    this.$message.success('导出成功');
                } catch (err) {
                    console.error(err);
                    this.$message.error('导出失败');
                }
            },
            async getData(tableName, where) {
                try {
                    const result = await myFetch('http://localhost:1628/production/controller/app/database/GetRecords', {
                        tableName,
                        where,
                        pageNo: 1,
                        pageSize: 1000
                    });
                    const body = await result.json();
                    if (body.data) {
                        return body.data;
                    }
                    this.$message.error('获取数据失败：' + body.errorMessage);
                } catch (err) {
                    console.error(err);
                    this.$message.error('请求失败');
                }
            },
            async signOut() {
                try {
                    const result = await myFetch('http://localhost:1628/production/controller/app/auth/SignOut', {});
                    const body = await result.json();
                    if (body.data) {
                        this.$message.success('退出登录成功');
                        setTimeout(() => {
                            window.location.replace('../../auth/login.html');
                        }, 1500);
                        return;
                    }
                    this.$message.error('退出登录失败：' + body.errorMessage);
                } catch (err) {
                    console.error(err);
                    this.$message.error('请求失败');
                }
            }
        },
        watch: {
            search: (newValue, oldValue) => {
                app.tableData = app.records.filter(value => {
                    let data = '';
                    for (let key in value) {
                        data += value[key];
                    }
                    return data.includes(newValue);
                });
            },
            bar: async (newValue, oldValue) => {
                const student = await app.getData('student');
                const teacher = await app.getData('teacher');
                const college = await app.getData('college');
                const major = await app.getData('major');
                const clazz = await app.getData('clazz');
                const course = await app.getData('course');
                app.selectData.student = student.records.map(value => {
                    return {
                        label: value.name,
                        value: value.id
                    };
                });
                app.selectData.teacher = teacher.records.map(value => {
                    return {
                        label: value.name,
                        value: value.id
                    };
                });
                app.selectData.college = college.records.map(value => {
                    return {
                        label: value.name,
                        value: value.id
                    };
                });
                app.selectData.major = major.records.map(value => {
                    return {
                        label: value.name,
                        value: value.id
                    };
                });
                app.selectData.clazz = clazz.records.map(value => {
                    return {
                        label: value.name,
                        value: value.id
                    };
                });
                app.selectData.course = course.records.map(value => {
                    return {
                        label: value.name,
                        value: value.id
                    };
                });
            }
        }
    })
</script>

<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        position: relative;
    }

    .main {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .header {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        background: #303133;
        justify-content: space-between;
    }

    .header > p {
        color: white;
        font-size: 18px;
        margin: 0px 25px;
    }

    .header > div > i {
        color: white;
        font-size: 18px;
        margin: 0px 25px;
    }

    .table-header {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        background: #DCDFE6;
        justify-content: flex-end;
    }

    .table-header > div > i {
        font-size: 18px;
        margin: 0px 25px;
    }

</style>
</body>
</html>